<template>
	<view class="home">
		<u-list
			@scrolltolower="scrollBottom"
		>
			<u-list-item>
				<u-navbar
					:placeholder="true"
				>
					<template #left>
						<view class="home-tabbar__left">
							<view class="home-tabbar__left_icon" @click="tabbarNoticeClick"><u-icon name="chat" size="20"></u-icon></view>
							<view class="home-tabbar__left_search">
								<u-search placeholder="请输入关键字搜索" 
								:showAction="false" inputAlign="center" :inputStyle="{'fontSize': '12px', 'width': '170px' , 'height': '28px'}"
								:searchIconSize="18" @search="onSearch"
								v-model="keyword"></u-search>
							</view>
						</view>
					</template>
				</u-navbar>
				<view class="content">
					<view>
						<u-swiper
						    :list="bannerList" previousMargin="30" nextMargin="30"
							circular indicator indicatorMode="line" indicatorActiveColor="#f56c6c"
							radius="5" bgColor="#ffffff" indicatorInactiveColor="#fff"
						></u-swiper>
					</view>
					<view class="home-link">
						<u-grid
							:border="false"
							col="5"
						>
							<u-grid-item
								v-for="(item,index) in baseList"
								:key="index"
								@click="linkClick(item)"
							>
								<view class="home-link__item">
									<image :src="item.image" style="width: 40px; height: 40px; border-radius: 50%;"></image>
									<view class="home-link__item__text">
										{{ item.text }}
									</view>
								</view>
							</u-grid-item>
						</u-grid>
					</view>
					<view>
						<image src="../../static/temp/ad1.jpg" mode="aspectFit" style="width: 100%;height: 100px;"></image>
					</view>
					<view class="home-recommend">
						<view class="home-recommend__title">
							<image src="../../static/temp/h1.png" style="width: 30px; height: 30px;"></image>
							<view class="home-recommend__title_text">
								<view class="home-recommend__title_text__cn">热门推荐</view>
								<view class="home-recommend__title_text__en">Popular Recommendation</view>
							</view>
							<view class="home-recommend__title_icon">
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
					<view class="goods-list">
						<view class="goods-list-item" v-for="item in goodsList" :key="item['id']" 
							@click="handleGoodsClick(item['id'])">
								<view class="goods-image">
								<image :src="minioUrl + item['images']"></image>
							</view>
							<view class="goods-info">
								<u--text :lines="2" :size="12"
									   :text="item.name" ></u--text>
								<view class="goods-price">
								<text>到手价</text>
									<u--text :block="true" :text="'￥'+item['lowprice']" :size="16" type="error"></u--text>
								</view>
								<u--text :text="'已售：'+ item['sold']" :size="12" type="info"></u--text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view>
					{{ goodsList }}
				</view> -->
				<up-back-top mode="square"></up-back-top>
				<u-loadmore 
					:status="showLoading ? 'loading' : 'nomore'" 
					loading-text="努力加载中" 
					nomore-text="没有更多了" 
				/>
				<u-tabbar
					value="index"
					:safeAreaInsetBottom="false"
					activeColor="#f56c6c"
				>
					<u-tabbar-item text="首页" name="index" icon="home-fill" ></u-tabbar-item>
					<u-tabbar-item text="分类" name="sort" icon="grid" @click="tabbarClick" ></u-tabbar-item>
					<u-tabbar-item text="购物车" name="cart" icon="shopping-cart" @click="tabbarClick" ></u-tabbar-item>
					<u-tabbar-item text="我的" name="mine" icon="account" @click="tabbarClick" ></u-tabbar-item>
				</u-tabbar>
			</u-list-item>
		</u-list>
	</view>
</template>

<script lang="ts" setup>
	import {getCurrentInstance, onMounted, ref} from 'vue'
	import {indexConst} from "./indexConst"
	
	const { proxy }: any = getCurrentInstance()
	const goodsList = ref([])
	const pageIndex = ref(1)
	const showLoading = ref(true)
	const minioUrl = ref(proxy.$minioUrl)
	const  bannerList = indexConst.bannerList
	const  baseList = indexConst.baseList
	const keyword = ref('')
	
	const onSearch = () => {
		uni.navigateTo({
			url: '/goods/goods_list/goods_list?keyword=' + keyword.value
		})
	}
	
	const tabbarNoticeClick = () => {
		uni.navigateTo({
		  url: '/notices/notice_list/notice_list'
		})
	}
	
	const linkClick = (item: any) => {
		let data = '?'
		for(let keys in item.data){
			data += (keys + "=" + item.data[keys])
		}
		uni.navigateTo({
			url: item.url + data
		})
	}
	
	const handleGoodsClick = (id: number) => {
		uni.navigateTo({
			url: '/goods/goods_detail/goods_detail?id=' + id
		})
	}
	
	const tabbarClick = (e: string) => {
		uni.redirectTo({
			url: '/pages/'+e+"/"+e
		});
	}
	
	onMounted(()=> {
		getGoodsList()
	})
	
	const scrollBottom = () => {
	  if(showLoading.value){
	    pageIndex.value += 1
	    getGoodsList()
	  }
	}
	
	const getGoodsList = () => {
		let data = {
			page: pageIndex.value,
			length: 6,
			start: (pageIndex.value-1)*6,
			type:  null
		}
		proxy.ajax(proxy.api.getGoodsList,'POST',data,function (resp: any){
			let list = resp.data.result.list;
			if(list.length > 0){
				for (let i =0;i<list.length;i++){
					let images = JSON.parse(list[i].images)
					list[i].images = images[0]
				}
				if(goodsList.value.length === 0){
					goodsList.value = list
				}else{
					goodsList.value = goodsList.value.concat(list);
				}
			}else{
				showLoading.value = false
			}
		})
	}
</script>

<style lang="scss">
@import "index.scss";
</style>
